<template>
  <div id="app">
    <van-form @submit="onSubmit">
      <van-field
        v-model="imei"
        name="imei"
        label="IMEI"
        placeholder="请输入IMEI"
        :rules="[{ required: true, message: 'IMEI不能为空' }]"
      />
      <van-field
        v-model="longitude"
        name="longitude"
        label="经度"
        placeholder="请输入经度"
        :rules="[{ required: true, message: '经度不能为空' }]"
      />
      <van-field
        v-model="latitude"
        name="latitude"
        label="纬度"
        placeholder="请输入纬度"
        :rules="[{ required: true, message: '纬度不能为空' }]"
      />

        <van-field name="distance" label="距离">
          <template #input>
          <van-radio-group v-model="distance" direction="horizontal">
            <van-radio name="2400">2400</van-radio>
            <van-radio name="3000">3000</van-radio>
          </van-radio-group>
          </template>
        </van-field>

      <!-- <van-field
        v-model="distance"
        name="distance"
        label="距离"
        placeholder="请输入距离"
        :rules="[{ required: true, message: '距离不能为空' }]"
      /> -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <!-- If your source-code lives in a variable called 'sourcecode' -->
    <van-divider />
    <pre
      class="code-box"
      v-highlightjs="returnIfo"
    ><code class="json">{{ returnIfo }}</code></pre>

    <!-- If you want to highlight hardcoded source-code -->
  </div>
</template>

<script>
const axios = require('axios')
export default {
  name: 'App',
  data() {
    return {
      imei: '',
      // longtitude       = "31.93178"    // 自行更改
      // latitute         = "118.8865121" // 自行更改
      longitude: '31.93178',
      latitude: '118.8865121',
      distance: '3000',
      returnIfo: '',
    }
  },
  methods: {
    onSubmit(values) {
      console.log(values)
      axios
        .get(
          `http://121.5.239.20:7001/run?imei=${this.imei}&longitude=${this.longitude}&latitude=${this.latitude}&distance=${this.distance}`
        )
        .then((res) => {
          this.returnIfo = JSON.stringify(res.data, null, 2)
        })
    },
  },
}
</script>

<style>
#app {
  color: #2c3e50;
  margin-top: 60px;
  height: 100vh;
}

.code-box {
  width: 90vw;
  margin: 0 auto;
  overflow: auto;
}
</style>
